import Vue from 'vue'
import Vuex from 'vuex'

// Vuex 的基本使用流程
// 1. 装包 yarn add vuex@3.4.0
// 2. 模块化 Vuex(在 store/index.js 写代码)
// 3. 导入 Vue 和 Vuex, 安装 Vuex 插件 Vue.use(Vuex)
Vue.use(Vuex)

// 4. 创建 Vuex.Store 实例对象
const store = new Vuex.Store({
  // 一旦开启严格模式, 所有 state 的修改都必须使用 mutations
  // strict: true,
  // 核心概念1: state
  // 1. 在 state 中定义数据
  // 2. 在组件中 this.$store.state.数据名访问数据
  state: {
    count: 100,
    list: [1,2,3,4,5,6,7,8,9,10]
  },
  // 核心概念2: mutations
  // state 中所有的数据不允许在其他地方修改, 必须通过 mutations 来修改
  // 1. 在 store 中定义 mutations 方法
  // 2. 在组件中使用 this.$store.commit('addCount')
  mutations: {
    // mutations 第一个参数永远都是 state
    addCount(state) {
      state.count++
    },
    // mutations 第一个参数永远都是 state
    // 参数2: 就是组件调用时传入的参数, 只能传一个
    // 后面没有更多的参数了, 意味着如果要传多个数据, 可以将数据放到对象或数组这些容器中再传过来
    addNum(state, num) {
      state.count += num
    }
  },
  actions:{
    asyncAdd(context,num){
      setTimeout(() => {
         // actions 中不能直接修改 state
        // 将数据交给 mutations 来修改
        // context.commit() 用来调用 mutations 方法
        context.commit('addNum',num)
      }, 1000);
    }
  },
   // 核心概念4: getters
  // Vuex 里的计算属性, 可以将 state 中的数据进行处理后返回
  getters: {
    // 函数里的第一个参数永远都是 state
    showList(state) {
      return state.list.filter(item => item > 5)
    }
  },
  
})

// 5. 导出 store 对象
export default store

// 6. 在 main.js 中导入并注入到 vue 实例上
